import React, { useState, useEffect } from 'react';
import { Divider, Button, Descriptions, Tag } from 'antd';
import OptForm from './OptForm';
import { getShopInfo, updateShopInfo } from '@/services/shop/api'
import { getMallTag } from '@/services/mall/api';
import { MsgType, showMsg, getTag, replaceRichTextImgHost } from '@/utils/utils';
import PermissionControl from '@/components/PermissionControl';

const MallInfo: React.FC = () => {
  const [visible, setVisible] = useState<boolean>(false);
  const [shopInfo, setShopInfo] = useState<SHOPAPI.ShopInfo>({} as SHOPAPI.ShopInfo);
  const [tagList, setTagList] = useState<MALLAPI.MallTag[]>([]);
  const [checkTagList, setCheckTagList] = useState<MALLAPI.MallTag[]>([]);

  const fetchShopInfo = async () => {
    try {
      const data: SHOPAPI.ShopInfo = await getShopInfo('N');
      const mallTag: MALLAPI.MallTag = await getMallTag();
      const tList: MALLAPI.MallTag[] = []
      data.tag_ids.forEach(id => {
        mallTag.forEach(tag => {
          if (id === tag.tag_id) {
            tList.push(tag)
          }
        })
      })
      data.shop_desc = replaceRichTextImgHost(data.shop_desc);
      setCheckTagList(tList);
      setTagList(mallTag);
      setShopInfo(data);
      setVisible(false);
    } catch (error) {
      showMsg(error?.data?.errmsg);
    }
  }

  useEffect(() => {
    fetchShopInfo();
  }, []);

  const handleAdd = async (data: SHOPAPI.ShopInfo) => {
    try {
      await updateShopInfo(data);
      showMsg(data.approval_status === 'C' ? '已保存' :'已提交审批', MsgType.SUCCESS);
      fetchShopInfo();
      return true;
    } catch (error) {
      showMsg(error?.data?.errmsg);
      return false;
    }
  }


  return <div className="mall-info">
     <div className="header">
       <div className="title">1.店铺信息</div>
       <div className="btns">
        <PermissionControl action_id="600601001">
          <Button onClick={() => setVisible(true)} type="primary">编辑</Button>
        </PermissionControl>
      </div>
     </div>
    <Divider style={{margin: '10px 0'}} />
    <div className="info-body">
      <Descriptions bordered>
        <Descriptions.Item span={2} label="店铺名称">{shopInfo.approval_status === 'N' ? shopInfo.shop_name : '-'}</Descriptions.Item>
        <Descriptions.Item label="关注数">{shopInfo.approval_status === 'N' ? (shopInfo.follow || 0) : '-'}</Descriptions.Item>
        <Descriptions.Item span={3} label="店铺介绍">
          <div dangerouslySetInnerHTML={{__html: shopInfo.approval_status === 'N' ? (shopInfo.shop_desc || '无').replace(/img/gi, 'img style="width: auto; max-width: 100%; height: auto;display: block"') : '-'}}></div>
        </Descriptions.Item>
        <Descriptions.Item span={3} label="启用模块">
          {
            shopInfo.approval_status === 'N' ? (
            checkTagList.length ? checkTagList.map(item => {
              return <Tag key={item.tag_id} color={getTag(item.tag_id)}>
                {item.tag_name}
              </Tag>
            }) : '无') : '-'
          }
        </Descriptions.Item>
        <Descriptions.Item span={3} label="提货地址">{shopInfo.approval_status === 'N' ? (shopInfo.take_address || '无') : '-'}</Descriptions.Item>
        <Descriptions.Item span={2} label="退货寄送地址">{shopInfo.approval_status === 'N' ? (shopInfo.refund_self_address || '无') : '-'}</Descriptions.Item>
        {
          shopInfo.approval_status === 'N' ?
          <Descriptions.Item label="退货寄回联系人/电话">
            {shopInfo.refund_liaison_person || '无'}/{shopInfo.approval_status === 'N' ? (shopInfo.refund_liaison_mobile || '无') : '-'}
          </Descriptions.Item> :
          <Descriptions.Item label="退货寄回联系人/电话">-</Descriptions.Item>
        }
        <Descriptions.Item span={3} label="退货送回地址">{shopInfo.approval_status === 'N' ? (shopInfo.refund_address || '无') : '-'}</Descriptions.Item>
        <Descriptions.Item span={3} label="店铺状态">
          {
            shopInfo.approval_status === 'N' ? (shopInfo.shop_status === 'O' ? '已开店' : '已闭店') : '-'
          }
        </Descriptions.Item>
      </Descriptions>
    </div>
    
    {
      visible && <OptForm 
        tagList={tagList}
        handleAdd={handleAdd}
        onSp={() => fetchShopInfo()}
        handleModalVisible={setVisible} />
    }
  </div>
}

export default MallInfo;